<template>
  <view class="shop-item " @click="handleClick">
    <view class="u-flex-y-center">
      <image :src="prefixURL(item.image)" :style="{width:imgWidth+'rpx',height:imgHeight+'rpx'}" mode=""></image>
      <view class="u-flex-1 u-flex-column u-flex-between" :style="{height:imgHeight + 'rpx'}">
        <view class="shop-name">{{item.name}}</view>
        <slot name="spec">
          <view class="shop-spec u-flex-y-center u-flex-between" v-if="specShow">
            <view>规格</view>
            <view>x1</view>
          </view>
        </slot>
        <slot name="price">
          <view class="shop-price">{{item.gold}}积分</view>
        </slot>
      </view>
    </view>
    <slot name="bottom"></slot>
  </view>
</template>

<script setup>
  import { prefixURL } from '../../../util/util';
  const emit = defineEmits(['handleClick'])
  const props = defineProps({
    imgWidth: {
      type: [Number, String],
      default: 180
    },
    imgHeight: {
      type: [Number, String],
      default: 162
    },
    specShow: {
      type: Boolean,
      default: true
    },
    item: {
      type: Object,
      default: () => {}
    }
  })
  const handleClick = () => {
    emit('handleClick')
  }
</script>

<style lang="scss" scoped>
  .shop-item {
    background: #fff;
    border-radius: 28rpx;
    padding: 20rpx;
    margin: 20rpx;

    image {
      margin-right: 16rpx;
      border-radius: 12rpx;
    }

    .shop-name {
      font-size: 30rpx;
      font-weight: 800;
    }

    .shop-spec {
      font-size: 26rpx;
      font-weight: 500;
      color: #666;
    }

    .shop-price {
      font-size: 32rpx;
      color: #000;
      font-weight: 500;
    }
  }
</style>